<template>
	<div id="write-article">
		<div class="top">
			<div class="panel">
				<el-button type="primary" 
					@click="toPublish" 
					:choice="topublish"
					class="btn"
						>发布文章
				</el-button>
				<el-button type="primary"
						@click="toDraft" 
						:choice="toDraft"
						class="btn"
							>存为草稿
				</el-button>
				<avatar v-show="this.common.isLogin" class="avatar"
							@click.native="toPage('/profile')"></avatar>
			</div>
		</div>
		
		<TestQuillEditor ref="child"></TestQuillEditor>
	</div>
</template>

<script>
	import TestQuillEditor from 'components/common/edit.vue'
	import Avatar from 'components/common/avatar.vue'
	
	export default{
		name:"WriteArticle",
		data(){
			return{
				topublish:0,
				todraft:0,
				choice:0,
				content:'',
			}
		},
		
		components:{
			TestQuillEditor,
			Avatar
		},
		methods:{
			toPublish(){
				this.$refs.child.ToPublish(1) // 方法2:直接调用
			},
			toDraft(){
				this.$refs.child.ToPublish(2)
			},
			toPage(value){
				this.$router.push(value)
			},
		},
	}
</script>

<style scoped="scoped">
	#write-article{
		margin:0 auto;
		width: 88%;
	}
	.top{
		position: relative;
		width: 100%;
		height: 60px;
		padding-top: 15px;
	}
	.panel{
		display: flex;
		width: 20%;
		position: absolute;
		right: 0;
	}
	.avatar{
		width: 40px;
		margin-left: 20px;
		cursor: pointer;
	}
	.btn{
		margin-top: 5px;
		height: 35px;
	}
</style>
